<template>
<view class="add_pet-main page-view">
	<view class="type-list">
		<view :class="['item', {'item-selected': type.curr == index}]" v-for="(item, index) in type.list" 
		@click="type.curr = index">
			{{ item.text }}
		</view>
	</view>
	<view class="info-container">
		<view class="title">宠物信息</view>
		<view class="line">
			<view class="label">宠物姓名</view>
			<input class="text-input" placeholder="请输入" placeholder-class="text-input-placeholder"/>
		</view>
		<view class="line">
			<view class="label">宠物头像</view>
			<view class="select-wrap">
				<view class="placeholder">请选择</view>
				<image class="icon-right" src="@/static/images/icon/arrow-right-black.png"></image>
			</view>
		</view>
		<view class="line">
			<view class="label">品种</view>
			<view class="select-wrap">
				<view class="placeholder">请选择</view>
				<image class="icon-right" src="@/static/images/icon/arrow-right-black.png"></image>
			</view>
		</view>
		<view class="line">
			<view class="label">出生日期</view>
			<view class="select-wrap">
				<view class="placeholder">请选择出生日期</view>
				<image class="icon-right" src="@/static/images/icon/arrow-right-black.png"></image>
			</view>
		</view>
		<view class="line">
			<view class="label">是否绝育</view>
			<view class="switch-wrap">
				<view>是</view>
				<value-switch v-model="isSterilization"></value-switch>
			</view>
		</view>
		<view class="line">
			<view class="label">毛色</view>
			<view class="select-wrap">
				<view class="placeholder">请选择</view>
				<image class="icon-right" src="@/static/images/icon/arrow-right-black.png"></image>
			</view>
		</view>
	</view>
	
	<view class="save-btn btn">保存</view>
</view>
</template>

<script>
import ValueSwitch from "@/components/value-switch.vue"	
export default {
	data() {
		return {
			// 宠物类型
			type: {
				curr: 0,
				list: [
					{ text: "猫咪", value: 0 },
					{ text: "狗狗", value: 1 },
					{ text: "异宠", value: 2 }
				]
			},
			// 是否绝育
			isSterilization: false
		}
	},
	components: {
		ValueSwitch
	}
}
</script>

<style lang="less">
.add_pet-main {
	padding: 30rpx;
	background: #F8F8F8;
	
	.type-list {
		display: flex;
		gap: 20rpx;
		
		.item {
			flex: 1;
			height: 120rpx;
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #FFFFFF;
			font-size: 28rpx;
			font-weight: bold;
			color: #3D3D3D;
			transition: .1s;
		}
		
		.item-selected {
			background: #FF6D03;
			color: #FFFFFF;
		}
	}
	
	.info-container {
		margin-top: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding-bottom: 20rpx;
		
		.title {
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			height: 108rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #000000;
		}
		
		.line {
			margin-top: 14rpx;
			height: 85rpx;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.label {
				width: 188rpx;
				font-size: 28rpx;
				color: #000000;
			}
			
			.text-input {
				flex: 1;
				font-size: 28rpx;
			}
			
			.text-input-placeholder {
				color: #C7C7C7;
			}
			
			.select-wrap {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex: 1;
				
				.placeholder {
					font-size: 28rpx;
					color: #C7C7C7;
				}
				
				.icon-right {
					height: 20rpx;
					width: 8rpx;
				}
			}
			
			.switch-wrap {
				display: flex;
				align-items: center;
				gap: 20rpx;
				
				>view {
					font-size: 28rpx;
					color: #000000;
				}
				
				>switch {
					width: 90rpx;
					height: 44rpx;
				}
			}
		}
	}
	
	.save-btn {
		height: 110rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 45rpx;
		background: #FF6D03;
		border-radius: 12rpx;
		font-size: 32rpx;
		color: #FFFFFF;
	}
}
</style>
